<template>
  <div>
    <el-dialog
        title="添加用户"
        :visible.sync="dialogVisible"
        width="30em"
        :before-close="handleClose">
        <el-form :model="users" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="users.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="users.password"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="users.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="users.mobile"></el-input>
            </el-form-item>
        
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="offuser">取 消</el-button>
                <el-button type="primary" @click="yesUser">确 定</el-button>
            </span>
    </el-dialog>
    <!-- <template>
        <el-button :plain="true" @click="open2">成功</el-button>
    </template> -->
  </div>
</template>

<script>
export default {
    data() {
        // 验证邮箱E
        var checkEmail = (rule, value, callback) => {
            var reg1 = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/
            if (reg1.test(value)||!value) {
                return callback()
            } 
            callback(new Error('邮箱格式不正确'))
            
        }
        // 验证电话
        var checkMobile = (rule, value, callback) => {
            var reg2 =  /^1[3-9]\d{9}$/
            if (reg2.test(value)||!value) {
               return callback()
            }
            callback(new Error('手机号码格式不正确'))
            
        }
        return {
            users:{
                username:'',
                password:'',
                email:'',
                mobile:'',
            },
            //防止失败的时候重复点击确定按钮
            num1:true,
            rules:{
                username: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],  
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                ],
                email:[
                    { required: false, message: '请输入邮箱', trigger: 'blur' },
                    {validator: checkEmail, trigger:'blur'}
                ],
                mobile:[
                    { required: false, message: '请输入手机号', trigger: 'blur' },
                    {validator: checkMobile, trigger:'blur'}
                ]
            }
        };
    },
methods:{
    add(){
        this.addUser('我是传递过去的一个参数熊书鹤')
    },
    //点击关闭按钮执行的函数
    handleClose(){
        this.$refs.ruleForm.resetFields()
        this.offUser()
    },
    //关闭模态框
    offuser(){
        //清空表单
        this.$refs.ruleForm.resetFields()
        //关闭模态框
        this.offUser()
    },
    // 点击确定按钮
    yesUser(){
        //节流阀
        if(this.num1){
            this.num1 = false
            setTimeout(() => {
                this.num1 = true
            }, 2000);
            this.$refs.ruleForm.validate((valid) => {
            if (valid) {
                this.$http({
                    method:'POST',
                    url:'users',
                    //需要传递的参数
                    data:this.users
                }).then(
                respose => {//正确请求时执行的代码
                    if (respose.data.meta.status!=201) {//添加失败
                        // console.log(respose.data.meta.status)
                        this.$message({
                        message: '添加失败,'+respose.data.meta.msg,
                        type: 'error',
                        showClose: true,
                        duration:4000
                        })
                    }
                    else{//添加成功
                        // console.log(respose.data)
                        this.$message({
                            message: '添加用户成功',
                            type: 'success',
                            duration:2000
                        })
                          // console.log(this.users);
                        this.offuser()
                        this.gethttp()
                    }   
                },
                error => {//错误时执行的代码
                    console.log(error.code);
                    this.$message({
                        message: '添加失败'+ error.code,
                        type: 'error',
                        duration:2500
                    })
                },
                )
            }
        })
            //
        }
       
        
    },
    //消息提示
    open2() {
        this.$message({
          message: '添加成功',
          type: 'success'
        })
      }
},
props:['addUser','offUser','dialogVisible','gethttp']
}
</script>

<style>

</style>